<template>
	<view class="content-header">
		<view class="top20"></view>
		<view class="order flex-column">
			<view>合计支付</view>
			<view class="flex-row order-price flex-content-center">
				<view class="order-price1">¥</view>
				<view class="order-price2">119.8</view>
				</view>
		</view>
		<view class="top20"></view>
		<view class="pay">
			<view class="pay-detal flex-column">
				<view class="pay-detal-txt1">支付方式</view>
				<view class="flex-row flex-content-between pay-detal1">
					<view class="flex-row pay-detal-txt">
						<image src="../../static/order/kj.png" mode="scaleToFill"></image>
						<view>快捷支付</view>
					</view>
					<image class="pay-detal-img" src="../../static/order/ok.png" mode="scaleToFill"></image>
				</view>
				<view v-if="kj" class="bank">
					<view class="flex-row bank-one flex-item-center" v-if="has_bank==false" @tap="goaddbank">
						<view class="bank-txt1">添加银行卡</view>
						<image class="bank-img1" src="../../static/order/you.png" mode="scaleToFill"></image>
					</view>
					<view class="flex-row bank-one flex-item-center" v-if="has_bank==true">
						<image class="bank-img2" src="../../static/order/yh.png" mode="scaleToFill"></image>
						<view class="bank-txt2">中国银行（8677）</view>
						<image class="bank-img1" src="../../static/order/you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-between pay-detal1">
					<view class="flex-row pay-detal-txt">
						<image src="../../static/order/wx.png" mode="scaleToFill"></image>
						<view>微信支付</view>
					</view>
					<image class="pay-detal-img" src="../../static/order/not.png" mode="scaleToFill"></image>
				</view>
				<view class="flex-row flex-content-between pay-detal1">
					<view class="flex-row pay-detal-txt">
						<image src="../../static/order/ye.png" mode="scaleToFill"></image>
						<view>余额支付</view>
					</view>
					<image class="pay-detal-img" src="../../static/order/not.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<mu-suspension bottom="0">
			<view class="foot flex-row flex-content-center">
				<view class="btn">确认支付</view>
			</view>
		</mu-suspension>
		<!-- 选择银行卡开始 -->
		<uni-popup ref="changebank" type="bottom">
			<view class="bank-list flex-column">
				<view class="bank-list-header flex-row flex-content-between">
					<view class="bank-list-header-txt">选择支付银行卡</view>
					<image class="bank-list-header-img" src="../../static/order/x.png" mode="scaleToFill"></image>
				</view>
				<view class="bank-list-sch">
					<scroll-view :scroll-y="true" class="bank-list-scroll">
						<view class="bank-list-bankone flex-row flex-content-between flex-item-center" v-for="bank in bankList">
							<view class="flex-row flex-item-center">
								<image class="bank-list-bankone-img1" src="../../static/order/yh.png" mode="scaleToFill"></image>
								<view class="flex-column bank-list-bankone-txt1">
									<view>中国银行 储蓄卡</view>
									<view>（2566）</view>
								</view>
							</view>
							<image  class="bank-list-bankone-img2" :src="bank.selected?`../../static/order/ok.png`:`../../static/order/not.png`" mode="scaleToFill"></image>
						</view>
						<view class="bank-list-bankone flex-row flex-content-between flex-item-center" @tap="goaddbank">
							<view class="flex-row">
								<image class="bank-img22" src="../../static/order/ka.png" mode="scaleToFill"></image>
								<view class="bank-txt22">使用新卡支付</view>
							</view>
							<image class="bank-img1" src="../../static/index/you.png" mode="scaleToFill"></image>
						</view>
					</scroll-view>
				</view>

			</view>
		</uni-popup>
		<!-- 选择银行卡结束 -->
		<!-- 输入短信验证码弹框开始 -->
		<uni-popup ref="dx" type="center">
			<view class="dx-view flex-column">
				<view class="flex-row flex-content-end">
					<image @tap="closex" class="x" src="../../static/order/x.png" mode="scaleToFill"></image>
				</view>
				<view class="x-1">请填写手机短信验证码</view>
				<view class="x-2">已发送到手机号：18916224432</view>
				<view class="x-input">
					<input v-model="code" placeholder="请输入验证码" placeholder-class="x-input-p"/>
				</view>
				<view class="x-btn">确认</view>
				<view class="totbor">60s后可重发</view>
			</view>
		</uni-popup>
		<!-- 输入短信验证码弹框结束 -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				kj:true,//选择快捷支付
				has_bank:false,//是否有银行卡
				code:"",//用户验证码
				bankList:[
					{
						selected:false
					},
					{
						selected:true
					},
					{
						selected:true
					},
					{
						selected:true
					},
					{
						selected:true
					},
					{
						selected:true
					},
				]
			}
		},
		onLoad() {
			var that = this;
			setTimeout(function(){
				// that.$refs.dx.open()
			},500)
		},
		methods:{
			//到添加银行卡页面
			goaddbank(){
				uni.navigateTo({
					url:'/pages/bank/add_bank'
				})
			},
			closex(){
				// console.log('haha');
				this.$refs.dx.close();
			}
		}
	}
</script>

<style lang="scss">
	.totbor{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-align: center;
		margin-top: 20rpx;
	}
	.x-btn{
		width: 400rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;
		border: 1px solid #69D330;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #69D330;
		text-align: center;
		line-height: 90rpx;
		margin-top: 60rpx;
		margin-left: 101rpx;
	}
	.x-input-p{
		color: #999999;
		font-size: 36rpx;
		line-height: 70rpx;
	}
	.x-input{
		width: 500rpx;
		height: 70rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1px solid #CECECE;
		margin-left: 54rpx;
		margin-top: 40rpx;
		>input{
			line-height: 70rpx;
			height: 70rpx;
			padding-left: 23rpx;
		}
	}
	.x-2{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 26rpx;
		text-align: center;
	}
	.x-1{
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-top: 22rpx;
	}
	.x{
		width: 28rpx;
		height: 28rpx;
		margin-top: 40rpx;
		margin-right: 40rpx;
	}
	.dx-view{
		width: 610rpx;
		height: 570rpx;
		background-color: #FFFFFF;
	}
	.bank-img22{
		width: 50rpx;
		height: 39rpx;
	}
	.bank-txt22{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 36rpx;
	}
	.bank-list-add{
		
	}
	.bank-list-bankone-txt1{
		margin-left: 36rpx;
		>view{
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.bank-list-bankone-img2{
		width: 36rpx;
		height: 30.44rpx;
	}
	.bank-list-bankone-img1{
		width: 50rpx;
		height: 50rpx;
	}
	.bank-list-bankone{
		margin-bottom: 80rpx;
	}
	.bank-list-sch{
		margin-top: 80rpx;
		margin-left: 30rpx;
	}
	.bank-list-scroll{
		width: 690rpx;
		height: 492rpx;
	}
	.bank-list-header-img{
		width: 28rpx;
		height: 28rpx;
		margin-top: 64rpx;
		margin-right: 54rpx;
	}
	.bank-list-header-txt{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 156rpx;
		margin-left: 219rpx;
	}
	.bank-list-header{
		width: 690rpx;
		height: 156rpx;
		border-bottom: 1px solid #EEEEEE;
		margin-left: 30rpx;
	}
	.bank-list{
		width: 750rpx;
		height: 836rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
		opacity: 1;
	}
	.bank-img2{
		width: 34rpx;
		height: 34rpx;
	}
	.bank-one{
		margin-top: 28rpx;
		border-bottom: 1px solid #EBEBEB;
		padding-bottom: 30rpx;
	}
	.bank-txt1{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.bank-txt2{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 14rpx;
	}
	.bank-img1{
		width: 14rpx;
		height: 23rpx;
		margin-left: 12rpx;
	}
	.bank{
		margin-left: 67rpx;
		
	}
	.btn{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
	.foot{
		width: 750rpx;
		height: 136rpx;
	}
	.pay-detal1{
		margin-top: 40rpx;
	}
	.pay-detal11{
		margin-top: 40rpx;
		border-bottom: 2rpx solid #EBEBEB;
	}
	.pay-detal-img{
		width: 32rpx;
		height: 32rpx;
	}
	.pay-detal-txt{
		>image:nth-child(1){
			width: 42rpx;
			height: 42rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 25rpx;
		}
	}
	.pay-detal-txt1{
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	.pay-detal{
		// margin-top: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 40rpx;
	}
	.pay{
		width: 690rpx;
		// height: 408rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-left: 30rpx;
		padding-bottom: 41rpx;
	}
	.order-price{
		text-align: center;
	}
	.order-price1{
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 41rpx;
	}
	.order-price2{
		font-size: 60rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 21rpx;
	}
	.order{
		width: 690rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-left: 30rpx;
		text-align: center;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 84rpx;
		}
	}
</style>